import { View, Text, StatusBar, FlatList, TouchableOpacity, Image, StyleSheet, useWindowDimensions } from 'react-native'
import React from 'react'
import { zhBorderColor, zhBorderWidth, zhSpacingColLg, zhSpacingColSm } from '../../global'
import { useRouter } from 'expo-router'

export default function Community() {
  //路由器 —— 用于页面跳转
  let router = useRouter()
  //获取屏幕的尺寸
  let  {width}  =  useWindowDimensions()
  let  iconWidth = width * 0.5 * 0.4    //每一个小图标的宽度和高度

  //数据 —— 待渲染的列表项集合；注意：此处使用“非状态数据”后续不能改变，即使修改了页面也不会重新渲染
  let menuList = [
    {id:100, title:'社区商城', icon:require('../../assets/img/cart.png'), href:'/mall/list'},
    {id:101, title:'社区医疗', icon:require('../../assets/img/hospital.png'), href:'/mall/list'},
    {id:102, title:'邻里互动', icon:require('../../assets/img/tree.png'), href:'/mall/list'},
    {id:103, title:'社区活动', icon:require('../../assets/img/news.png'), href:'/mall/list'},
    {id:104, title:'便民服务', icon:require('../../assets/img/list.png'), href:'/mall/list'},
    {id:105, title:'志愿服务', icon:require('../../assets/img/earth.png'), href:'/mall/list'},
  ]
  //演示：如何渲染出列表中的一个列表项
  let renderMenuItem = ({index, item})=>{     
    //item：要遍历的每个元素  index：该元素在原始数组中的下标
    // console.log('==============================')
    // console.log('要循环渲染的元素内容：', item)
    // console.log('要循环渲染的元素下标：', index)
    return (
      <TouchableOpacity 
        style={ss.menu} 
        activeOpacity={0.5} 
        onPress={_=>router.push(item.href)}>
        {/* 典型错误：不能在手机中显示页面时再进行循环导入图片——晚了*/}
        {/* <Image style={ss.icon} source={require(item.icon)}/> */}
        {/* 正确做法：在服务器端打包时即要导入每一张图片 */}
        <Image style={[ss.icon, {width:iconWidth, height:iconWidth}]} source={item.icon}/>
        <Text style={ss.title}>{item.title}</Text>
      </TouchableOpacity>
    )
  }

  return (
    <View>
      {/* F1: 顶部状态栏 */}
      <StatusBar barStyle='#fff'/>
      {/* F2: 标题栏 —— 由_layout中的页签式导航设定完成 */}
      {/* F3: 主体：六宫格系统 */}
      {/* FlatList：平面列表：在水平/竖直方向上展开多个列表项 */}
      {/* data：列表中要渲染出来的数据 */}
      {/* renderItem：如何渲染出一个列表项 */}
      {/* numColumns：每行渲染几个列表项，注意：修改后必须重启App */}
      <FlatList 
        data={menuList}
        renderItem={renderMenuItem}
        numColumns={2}
      />
    </View>
  )
}


//模块内部样式
let  ss = StyleSheet.create({
  menu: {
    width: '50%', //宽度
    borderColor: zhBorderColor, //边框
    borderWidth: zhBorderWidth,
    paddingVertical: zhSpacingColLg*3, //竖直方向上的内边距
    alignItems: 'center', //子元素在交叉轴上居中显示
  },
  icon: {
    // width: '40%', 
    // height: 100,
    marginBottom: zhSpacingColSm,
  },
  title: {},
})